<template>
  <div style="padding:20px">
    <hr />
    分割线 自定义多选框 <br />
    <br />


    <emCheckbox
      :indeterminate="indeterminate"
      :disabled="disabled"
      :checked="checked"
      @change="onChange"
      :styleObj="styleObj"
      :pseudoElementBackgroundColor="pseudoElementBackgroundColor"
      >多选框</emCheckbox
    >


    
    <form>
      <p>
        设置是否为选中 是:<input
          type="radio"
          name="checked"
          v-model="checked"
          :value="flag1"
        />
        否:<input
          type="radio"
          v-model="checked"
          name="checked"
          :value="flag2"
        />
      </p>
      <p>
        设置是否为半选 是:<input
          type="radio"
          name="indeterminate"
          v-model="indeterminate"
          :value="flag1"
        />
        否:<input
          type="radio"
          v-model="indeterminate"
          name="indeterminate"
          :value="flag2"
        />
      </p>
      <p>
        设置是否为失效状态 是:<input
          type="radio"
          name="disabled"
          v-model="disabled"
          :value="flag1"
        />
        否:<input
          type="radio"
          v-model="disabled"
          name="disabled"
          :value="flag2"
        />
      </p>
      <p>
        边框颜色: <input type="text" name="checkBoxBorder" v-model="styleObj.border"  @submit.native.prevent  />    <br/>
        边框圆角: <input type="text" name="styleObj" v-model="styleObj.borderRadius"  @submit.native.prevent  /> <br/>
        多选框内部背景颜色: <input type="text" name="styleObj" v-model="styleObj.backgroundColor"  @submit.native.prevent  /> <br/>
        多选框宽: <input type="text" name="styleObj" v-model="styleObj.width"  @submit.native.prevent  /> <br/>
        多选框高: <input type="text" name="styleObj" v-model="styleObj.height"  @submit.native.prevent  /> <br/>
      </p>
      <p>
        内部框颜色: <input type="text" name="pseudoElementBackgroundColor" v-model="pseudoElementBackgroundColor"  @submit.native.prevent  />    <br/>
      </p>
    </form>

    <h1>点击多选框打印参数:{{ result }}</h1>

    <hr>分割线 自定义多选框组 <br> 
    	<pre >{{plainOptions}}</pre>
    <emCheckboxGroup   :options="plainOptions"  :defaultValue="['Apple']" @change="onDemoChange"></emCheckboxGroup>  
  </div>
</template>
<script>
// const defaultCheckedList = ['Apple', 'Orange','Pear'];
const plainOptions=[
        { label: 'Apple', value: 'Apple' },
        { label: 'Pear', value: 'Pear' },
        { label: 'Orange', value: 'Orange', disabled: false }]

export default {
  data() {
    return {
      indeterminate: true, //半选是否选中
      checked: true,
      flag1: true,
      flag2: false,
      defaultChecked: true,
      disabled: false,
      result: null,
      styleObj: {
        //多选边框颜色   边框角度样式对象  多选框内部背景颜色
        border: "1mm solid #1890ff",
        borderRadius: "10mm",
        backgroundColor: "red",
        width:'12mm',
        height:'12mm',
      },
      
      pseudoElementBackgroundColor:"black",
      plainOptions,
    };
  },
  created(){
    console.log(this.styleObj)
  }
  ,
  methods: {
    onChange(e) {
      this.result = e.target;
    },
    // 多选框组 操作事件
    onDemoChange(event){
      console.log(event)
    }
  },
};
</script>
